import { ImagePicker, Button, Flex, WhiteSpace, Toast } from 'antd-mobile';
import { Setting } from './Setting';
import { createForm } from 'rc-form';
import DropzoneComponent from 'react-dropzone-component';

class LoginT extends React.Component {

  constructor(props) {
      super(props);

      // console.log(props);

      let files = [];
      if (props.record.sfz) {
        files.push({url: props.record.sfz});
      }

      let idx = this.props.site.findIndex(x => x.name === 'sfz.spec');

      this.state = {
        content: idx >= 0 ? this.props.site[idx].content : '',
        files: files,
        imageUrl: files.length > 0 ? files[0].url : null,
      };

      this.fileInput = null;

      // console.log(this.state);
  }

  onUploadClick = () => {
    if (this.fileInput != null) {
      this.fileInput.click();
    }
  }

  onFileInput = (file) => {
    const _this = this;
    const newImage = new FormData();
    newImage.append('photo', file)

    fetch(Setting.BaseUrl + 'sfzjz', {
      method: 'POST',
      body: newImage
    }).then(function (resp) {
      return resp.json();
    }).then(function (json) {
      if (json.success) {
        _this.setState({
          imageUrl: json.file.image_url
        });
      } else {
        Toast.offline(json.error, 2);
      }
    })
  }


  onChange = (files, type, index) => {

    if( index == 0 ){
      this.setState(Object.assign({}, this.state, {
        imageUrl:'',
        files,
      }));

    }else{
      this.setState(Object.assign({}, this.state, {
        files,
      }));

      
    }
  }

  render() {
    const { files } = this.state;
    const title = this.props.title;
    const name = this.props.nodeName;

    return (
      <div className={name}>
        <h2 className="step-title">{title}</h2>

        <input type="hidden" value={this.state.imageUrl} name='sfz' />

        <input
          type='file' accept='.jpg'
          ref={(ref) => this.fileInput = ref}
          onChange={()=>this.onFileInput(this.fileInput.files[0])}
        />

        <div className="dz-default dz-message" onTouchStart={this.onUploadClick}>
          <span>请上传身份证正面图片</span>
        </div>

        {/* <Flex justify="center">
          <div className="scanerBox">
            <ImagePicker
              files = { files }
              onChange = { this.onChange }
              selectable = { files.length < 1 }
            />
            <div className="diode">
              <div className="laser"></div>
            </div>
          </div>
        </Flex> */}


        <ul dangerouslySetInnerHTML={{__html: this.state.content}}>
        </ul>
      </div>
    );
  }

}

const Step3 = createForm()(LoginT);

export default Step3
